<!-- 合规案例-筛选 -->
<template>
  <div class="case-pop">
    <div class="filter-group">
      <!-- 请选择发现方式 -->
      <div class="f-item">
        <p class="title"><span class="name">请选择发现方式</span></p>
        <div class="btn-list">
          <van-button v-model="activeType" v-for="(item, index) in typeList" :key="index"
            :class="activeType == item.ID ? 'default-btn active-btn' : 'default-btn'" @click="handleClickType(item.ID)">
            {{ item.NAME }}
          </van-button>
        </div>
      </div>
      <!-- 年度年份 -->
      <div class="f-item">
        <p class="title">
          <span class="name">年度年份</span>
        </p>
        <div class="time-btn-list">
          <van-cell is-link @click="showTimePopup">{{ yearTime || '请选择年度年份' }}</van-cell>
          <van-popup v-model="yearPop" position="bottom">
            <van-picker title="请选择年度年份" show-toolbar :columns="years" :default-index="defaultYearIndex"
              @confirm="onSureYear" @cancel="onCancelYear" />
          </van-popup>

        </div>
      </div>
    </div>
    <div class="filter-btn">
      <van-button plain type="info" size="small" @click="reset">重置</van-button>
      <van-button type="info" size="small" @click="ok">确定</van-button>
    </div>
  </div>
</template>

<script>
// import { getCaseData } from '@/api/case'
export default {
  name: 'casePop',
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      activeType: '0',
      // 筛选-入职时间
      yearTime: '',
      yearPop: false,
      typeList: [],
      years: [],
      defaultYearIndex: 2
    }
  },
  created() {
    this.getYear()
    if (this.list) {
      this.typeList = this.list
      // this.activeType = '0'
    }
  },
  methods: {
    getYear() {
      const currentYear = new Date().getFullYear();
      for (let i = 1990; i <= currentYear + 50; i++) {
        this.years.push(i);
      }
      let index = this.years.findIndex(item => item == new Date().getFullYear())
      this.defaultYearIndex = index
    },
    onSureYear(val) {
      this.yearTime = val
      this.yearPop = false
    },
    onCancelYear() { },
    // async getQryFxfsList() {
    //   const resData = await getCaseData({ code: '80304' })
    //   if (!resData || !resData.data || !resData.data.VALUE_LIST) return
    //   this.typeList = resData.data.VALUE_LIST
    //   this.typeList.unshift({ ID: '0', NAME: '全部' })
    //   this.activeType = '0'
    // },
    showTimePopup() {
      this.yearPop = true
    },
    handleClickType(val) {
      this.activeType = val
    },
    ok() {
      let qry = {
        type: this.activeType == '0' ? '' : this.activeType,
        year: this.yearTime
      }
      this.$emit('on-emit', qry)
    },
    reset() {
      this.activeType = '0'
      this.yearTime = ''
      let index = this.years.findIndex(item => item == new Date().getFullYear())
      this.defaultYearIndex = index
    }
  }

}
</script>

<style scope lang="less">
.case-pop {
  height: 100%;

  .filter-group {
    height: calc(100% - 98px);

    .f-item {
      .title {
        display: flex;
        align-content: center;
        justify-content: space-between;

        .name {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 500;
          font-size: 28px;
          color: #251717;
          line-height: 42px;
        }

        .more {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          font-size: 26px;
          color: #7F8389;
          line-height: 40px;
          display: flex;
          align-items: center;
        }
      }

      .btn-list {
        flex-direction: row;
        justify-content: space-between;
        padding: 30px 0 40px;
        display: flex;
        flex-wrap: wrap;
      }

      .time-btn-list {
        .van-cell {
          border-bottom: 2px solid #ededed;
          padding: 28px 0;
          margin-bottom: 42px;

          .van-cell__value {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 26px;
            color: #7F8389;
          }

          .van-cell__right-icon {
            color: #c0c0c0;
          }

          &::after {
            border: none;
          }
        }

        .van-popup {
          border-radius: 30px 30px 0 0;
          width: 100%;
          height: 50%;
          max-height: 100%;
          right: 0;
          left: 0;
          bottom: 0;
        }
      }

      .default-btn {
        min-width: 170px;
        font-size: 24px;
        height: 64px;
        background: #F5F7FA;
        border-radius: 32px;
        border: 1px solid #F1F1F1;
        margin-right: 8px;
        margin-bottom: 10px;
        padding: auto;
      }

      .active-btn {
        height: 64px;
        background: rgba(57, 127, 249, 0.1);
        border-radius: 32px;
        border: 1px solid #397FF9;
        color: #397FF9;
      }
    }
  }

  .filter-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 18px;
    padding-bottom: 38px;
    display: flex;
    justify-content: space-evenly;

    .van-button {
      width: 216px;
      height: 72px;
    }
  }
}
</style>